<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生物树</title>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 100%;height: 1000px" id="svg">
    <defs>
        <g id="node">
            <rect width="150" height="100"  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
          stroke-opacity:0.9" rx="20" ry="20"/>
        </g>
    </defs>
   <!-- <use xlink:href="#node" x="10" y="10" style="fill: #cfc;cursor: pointer" onclick="alert('hello')"/>-->
</svg>
<script type="text/javascript">
    var svg=$("#svg");
    function Node(biology) {
        this.biology=biology;
    }
    Node.prototype.draw=function () {
            $("#svg").html("<use xlink:href=\"#node\" x=\"200\" y=\"200\" style=\"fill: #cfc;cursor: pointer\" onclick=\"alert('你好啊')\"/>");

    }

    var root=new Node({"id":-1,"name":"生物"});
    root.draw();
    $(function () {
        var nodeRect = document.createElementNS(svgNS,"rect");
        nodeRect.setAttribute("height",200);
        nodeRect.setAttribute("width",200);
        nodeRect.setAttribute("x",10);
        nodeRect.setAttribute("y",10);
        nodeRect.setAttribute("fill","#FFFFFF");
        nodeRect.setAttribute("stroke","#000000");
        nodeRect.setAttribute("onclick","graphClick(evt)");
        var svgLayer = document.getElementById('svgLayer');

    })

</script>
</body>
</html>